<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
		    <comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <view style="position:relative;">
		            <navigator class="flex-grow-0" hoverClass="none" openType="redirect" :url="'/store/shop/shop?store_id='+data.shop.id">
		                <view class="btn-main flex-x-center flex-y-center summary-home fs-sm">
		                    <image src="../../static/store/icon-home.png"></image>
		                    <text>返回店铺首页</text>
		                </view>
		            </navigator>
		            <image class="summary-head" :src="data.shop.header_bg" mode="aspectFill"></image>
		            <image class="summary-logo" :src="data.shop.logo" mode="aspectFill"></image>
		        </view>
		        <view class="flex-col flex-y-center" style="margin-top:100upx;padding:0 48upx;font-size:15pt;">{{data.shop.name}}</view>
		        <view style="margin:40upx 55upx 0 55upx;color:#353535">
		            <view class="flex flex-row flex-y-center summary-bottom" v-if="data.shop.main_content">
		                <image class="flex-grow-0" src="../../static/store/icon-zyin.png"></image>
		                <view class="flex-grow-1">{{data.shop.main_content}}</view>
		            </view>
		            <view class="flex flex-row summary-bottom" v-if="data.shop.service_tel">
		                <image class="flex-grow-0" src="../../static/store/icon-bhao.png"></image>
		                <view class="flex-grow-1">{{data.shop.service_tel}}
		                    <view @click="callPhone" class="copy-info" :data-info="data.shop.service_tel">拨号</view>
		                </view>
		            </view>
		            <view class="flex flex-row summary-bottom" v-if="data.shop.address">
		                <image class="flex-grow-0" src="../../static/store/icon-dhang.png"></image>
		                <view class="flex-grow-1">{{data.shop.address}}
						 <view @click="map_power" class="copy-info">导航</view>	
		                </view>
		            </view>
		            <view class="flex flex-row summary-bottom" v-if="data.shop.summary">
		                <image class="flex-grow-0" src="../../static/store/icon-jjie.png"></image>
		                <text class="flex-grow-1">{{data.shop.summary}}</text>
		            </view>
		        </view>
		        <view class="flex-x-center" style="margin:48upx 0;color:#888" v-if="data.shop.latitude>0&&data.shop.longitude>0">
		            <map :latitude="data.shop.latitude" :longitude="data.shop.longitude" :markers="data.markers" style="width:640upx;height:560upx"></map>
		        </view>
		    </view>
		    	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				 data: {
					 shop:{},
				    markers: []
				}
			}
		},
		 onLoad: function(t) {myVue = this;
		        myVue.getApp.page.onLoad(this, t), t.store_id && (this.setData({
		            store_id: t.store_id
		        }), this.getShopData());
		    },
		    onShow: function() {
		        myVue.getApp.page.onShow(this);
		    },
			methods:{
				 getShopData: function() {
				    var a = this;
				    a.getApp.core.showLoading({
				        title: "加载中"
				    }), a.getApp.request({
				        url: a.getApp.api.store.shop,
				        data: {
				            store_id: a.data.store_id,
				            tab: 0,
				            cat_id: 0
				        },
				        success: function(t) {
				            if (0 == t.code) {
				                var e = t.data.shop, o = [ {
				                    iconPath: "/static/images/img-map.png",
				                    id: 0,
				                    width: 20,
				                    height: 43,
				                    longitude: e.longitude,
				                    latitude: e.latitude
				                } ];
				                a.setData({
				                    markers: o,
				                    shop: t.data.shop
				                });
				            }
				        },
				        complete: function() {
				            a.getApp.core.hideLoading(), a.setData({
				                loading: !1
				            });
				        }
				    });
				},
				callPhone: function(t) {
				    myVue.getApp.core.makePhoneCall({
				        phoneNumber: t.target.dataset.info
				    });
				},
				map_power: function() {
					var o = this;
					myVue.getApp.getConfig(function(t) {
							var e = o.data.shop;
							void 0 !== e ? o.map_goto(e) : myVue.getApp.core.getSetting({
									success: function(t) {
											t.authSetting["scope.userLocation"] ? o.map_goto(e) : myVue.getApp.getauth({
													content: "需要获取您的地理位置授权，请到小程序设置中打开授权！",
													cancel: !1,
													author: "scope.userLocation",
													success: function(t) {
															t.authSetting["scope.userLocation"] && o.map_goto(e);
													}
											});
									}
							});
					});
				},
				map_goto: function(t) {
				    myVue.getApp.core.openLocation({
				        latitude: parseFloat(t.latitude),
				        longitude: parseFloat(t.longitude),
				        address: t.address
				    });
				}
			}
		   
	}
</script>

<style scoped>
page {
    background: #fff;
    overflow-x: hidden;
}

.summary-logo {
    border-radius: 16upx;
    display: block;
    position: absolute;
    top: 130upx;
    left: 50%;
    transform: translate(-50%,0);
    height: 140upx;
    width: 140upx;
}

.summary-head {
    display: block;
    height: 200upx;
    width: 100%;
}

.summary-home {
    position: absolute;
    top: 55upx;
    left: 0;
    height: 56upx;
    width: 200upx;
    z-index: 100;
    border-radius: 0 28upx 28upx 0;
    color: #fff;
    background-color: #f39800;
}

.summary-home image {
    width: 12upx;
    height: 22upx;
    margin-right: 10upx;
}

.copy-info {
    display: inline-block;
    border-radius: 8upx;
    text-align: center;
    color: #5292ed;
    width: 150upx;
    margin-left: 30upx;
    line-height: 44upx;
    border: 1upx solid #5292ed;
}

.summary-bottom {
    margin-bottom: 15upx;
}

.summary-bottom image {
    display: block;
    height: 32upx;
    width: 32upx;
    margin-right: 24upx;
    margin-top: 8upx;
}
</style>
